首先我們要先知道什麼是SEO？

沒有SEO，人們只有5.59%的機會找到你

SEO為什麼重要？讓人們看見你

以Google的角度而言 :
Google不斷的更新演算法，並調整網站的排名，以提供使用者最佳答案的過程。
以圖書館的角度而言 :
圖書館員透過整理書的擺放位置，並隨時引進新書及報章雜誌，以提供讀者最新資訊及最佳答案的過程。
※以我的角度而言 :
了解搜尋引擎的運做規則，透過一些調整網站的方法，取得好的網站排名。

這樣我們就瞭解為何要將 h1 (主標題)內的文字置換成精美的 LOGO 圖片了

h1 (主標題)佔搜尋引擎搜索優化部分非常重！
假如我希望使用者一搜尋 就能找到網站，但我也希望 h1 是一張美美的 LOGO，那我是不是會寫成下面的格式呢？

<h1>我要搜尋貓咪</h1>
<style>
h1{
  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  width: 500px;
  height: 333px;
}
</style>

但這樣一來，我們就會得到以下的畫面

但是我們希望 h1可以讓搜尋引擎找到但文字不會出現，這時候怎麼辦呢？
我們可以這樣寫

方法一

<h1>我要搜尋貓咪</h1>
<style>
h1{
  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  width: 500px;
  height: 333px;
  text-indent:-9999px;
}
</style>

• text-indent:-9999px，讓文字向左偏移 9999px、出現在螢幕之外的地方，也等於是隱藏文字
• 在為 h1 設定背景圖片(background)，就完成了 "h1 標籤以圖片取代文字" 這件事

方法二

<h1>我要搜尋貓咪</h1>
<style>
h1{
  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  width: 500px;
  height: 333px;
  text-indent: 101%;
  white-space: nowrap;
  overflow: hidden;
}
</style>

• text-indent: 101%
  強迫文字縮排至原本的區域外
• white-space: nowrap
  規定段落中的文字不得進行換行，常用於避免字數過多時自動換行導致閱讀效果變差
• overflow: hidden
  將超出範圍的內容隱藏

這樣一來我們就可以得到美美的 LOGO 圖，又可以讓瀏覽器搜尋到我們的h1標籤！

總結

SEO是一門很深的學問，我也還在學習，利用css設定樣式，既可以得到美美的logo圖，又可以優化SEO。

小孩子才做選擇，我全都要！